<template>
  <view class="list">
    <view class="fixbg"></view>

    <view class="container">
      <scroll-view scroll-y="true">
        <view class="list-head">
          <view class="list-head-img">
            <image src="../../static/bbbb.png" mode=""></image>
            <text class="iconfont icon-bofang_o">30亿</text>
          </view>

          <view class="list-head-text">
            <view>云音乐飙升榜</view>
            <view>
              <image src="../../static/yiyun.webp" mode=""></image>网易云音乐
            </view>
            <view>
              云音乐中每天热度上升最快的100首单曲，每日更新
            </view>
          </view>
        </view>
        <!-- 条件编译 -->
        <!-- #ifdef MP-WEIXIN -->
        <button class="list-share" open-type="share">
          <text class="iconfont icon-fenxiang"></text>分享给微信好友
        </button>
        <!-- #endif -->
        
        <view class="list-music">
          <view class="list-mnusic-head">
            <text class="iconfont icon-bofang1"></text>
            <text>播放全部</text>
            <text>(共100首)</text> 
          </view>
          <view class="list-music-item">
            <view class="list-music-top">1</view>
            <view class="list-music-song">
              <view>与我无关</view>
              <view >
                <image src="../../static/HI.png" mode=""></image>
                <image src="../../static/SQ.png" mode=""></image>
                阿冗 - 与我无关
              </view>
             
            </view>
             <text class="iconfont icon-bofangqi-bofangshu"></text>
          </view>
          
          <view class="list-music-item">
            <view class="list-music-top">1</view>
            <view class="list-music-song">
              <view>与我无关</view>
              <view >
                <image src="../../static/HI.png" mode=""></image>
                <image src="../../static/SQ.png" mode=""></image>
                阿冗 - 与我无关
              </view>
             
            </view>
             <text class="iconfont icon-bofangqi-bofangshu"></text>
          </view>
          
          <view class="list-music-item">
            <view class="list-music-top">1</view>
            <view class="list-music-song">
              <view>与我无关</view>
              <view >
                <image src="../../static/HI.png" mode=""></image>
                <image src="../../static/SQ.png" mode=""></image>
                阿冗 - 与我无关
              </view>
             
            </view>
             <text class="iconfont icon-bofangqi-bofangshu"></text>
          </view>
          
          <view class="list-music-item">
            <view class="list-music-top">1</view>
            <view class="list-music-song">
              <view>与我无关</view>
              <view >
                <image src="../../static/HI.png" mode=""></image>
                <image src="../../static/SQ.png" mode=""></image>
                阿冗 - 与我无关
              </view>
             
            </view>
             <text class="iconfont icon-bofangqi-bofangshu"></text>
          </view>
          
          
          <view class="list-music-item">
            <view class="list-music-top">1</view>
            <view class="list-music-song">
              <view>与我无关</view>
              <view >
                <image src="../../static/HI.png" mode=""></image>
                <image src="../../static/SQ.png" mode=""></image>
                阿冗 - 与我无关
              </view>
             
            </view>
             <text class="iconfont icon-bofangqi-bofangshu"></text>
          </view>
          
          
          <view class="list-music-item">
            <view class="list-music-top">1</view>
            <view class="list-music-song">
              <view>与我无关</view>
              <view >
                <image src="../../static/HI.png" mode=""></image>
                <image src="../../static/SQ.png" mode=""></image>
                阿冗 - 与我无关
              </view>
             
            </view>
             <text class="iconfont icon-bofangqi-bofangshu"></text>
          </view>
          
          
          <view class="list-music-item">
            <view class="list-music-top">1</view>
            <view class="list-music-song">
              <view>与我无关</view>
              <view >
                <image src="../../static/HI.png" mode=""></image>
                <image src="../../static/SQ.png" mode=""></image>
                阿冗 - 与我无关
              </view>
             
            </view>
             <text class="iconfont icon-bofangqi-bofangshu"></text>
          </view>
          
          
          <view class="list-music-item">
            <view class="list-music-top">1</view>
            <view class="list-music-song">
              <view>与我无关</view>
              <view >
                <image src="../../static/HI.png" mode=""></image>
                <image src="../../static/SQ.png" mode=""></image>
                阿冗 - 与我无关
              </view>
             
            </view>
             <text class="iconfont icon-bofangqi-bofangshu"></text>
          </view>
          
          
          <view class="list-music-item">
            <view class="list-music-top">1</view>
            <view class="list-music-song">
              <view>与我无关</view>
              <view >
                <image src="../../static/HI.png" mode=""></image>
                <image src="../../static/SQ.png" mode=""></image>
                阿冗 - 与我无关
              </view>
             
            </view>
             <text class="iconfont icon-bofangqi-bofangshu"></text>
          </view>
          
          
          <view class="list-music-item">
            <view class="list-music-top">1</view>
            <view class="list-music-song">
              <view>与我无关</view>
              <view >
                <image src="../../static/HI.png" mode=""></image>
                <image src="../../static/SQ.png" mode=""></image>
                阿冗 - 与我无关
              </view>
             
            </view>
             <text class="iconfont icon-bofangqi-bofangshu"></text>
          </view>
          
          
          <view class="list-music-item">
            <view class="list-music-top">1</view>
            <view class="list-music-song">
              <view>与我无关</view>
              <view >
                <image src="../../static/HI.png" mode=""></image>
                <image src="../../static/SQ.png" mode=""></image>
                阿冗 - 与我无关
              </view>
             
            </view>
             <text class="iconfont icon-bofangqi-bofangshu"></text>
          </view>
          
          
          
          
        </view>
      </scroll-view>
    </view>


  </view>
</template>

<script>
  import {list} from '@/common/api.js'
  export default {
    data() {
      return {
      playlist:{}
      };
    },
    onLoad(options) {
      console.log(options.listId);
      list(options.listId).then((res)=>{
        console.log(res);
        if(res[1].data.code==='200'){
          this.playlist=res[1].data.playlist
        }
      })

    }
  }
</script>

<style lang="scss">
  .list {

    .fixbg {
      width: 100%;
      height: 100vh;
      position: fixed;
      left: 0%;
      top: 0%;
      background-image: url('../../static/blue.webp');
      background-size: cover;
      background-position: center 0;
      // 毛玻璃背景
      filter: blur(10px);
      // 有白边，进行缩放
      transform: scale(1.2);
      z-index: -2;
    }

    .container {
      .list-head {
        display: flex;
        margin: 30rpx;
       

        .list-head-img {
          width: 264rpx;
          height: 264rpx;
          border-radius: 30rpx;
          overflow: hidden;
          position: relative;
          margin-right: 42rpx;

          image {
            width: 100%;
            height: 100%;
          }

          text {
            position: absolute;
            right: 8rpx;
            top: 8rpx;
            color: white;
            font-size: 26rpx;
            
          }
        }

        .list-head-text {
          flex: 1;
          color: #f0f2f7;
          & view:nth-child(1){
            color: white;
          }
          & view:nth-child(2){
            display: flex;
            margin: 20rpx 0;
            font-size: 24rpx;
            align-items: center;
            image{
                 width: 51rpx;
                 height: 46rpx;
                 border-radius: 50%;
                 margin-right: 18rpx;
            }
          }
          & view:nth-child(3){
            line-height: 34rpx;
            font-size: 22rpx;
          }
        }


      }
      
      .list-share{
        width: 330rpx;
        height: 74rpx;
        margin: 0 auto;
        background: rgba(0,0,0,0.4);
        border-radius: 37rpx;
        color: white;
        text-align: center;
        line-height: 74rpx;
        font-size: 28rpx;
        text{
          margin-right: 16rpx;
        }
      }
    
      .list-music{
        background: white;
        border-radius: 50rpx;
        margin-top: 40rpx;
        overflow: hidden;
        .list-mnusic-head{
          height: 50rpx;
          margin: 30rpx 0 70rpx 22rpx;
          & text:nth-child(1){
            height: 50rpx;
            font-size: 50rpx;
          }
          & text:nth-child(2){
            font-size: 30rpx;
            margin: 0 10rpx 0 26rpx;
          }
          & text:nth-child(3){
            font-size: 26rpx;
            color: #b2b2b2;
          }
        }
        .list-music-item{
          display: flex;
          margin: 0 32rpx 66rpx 46rpx;
          align-items: center;
          color: #959595;
          .list-music-top{
            width: 58rpx;
            font-size: 30rpx;
            line-height: 30rpx;
          }
          .list-music-song{
            flex: 1;
            & view:nth-child(1){
              font-size: 28rpx;
              color: black;
            }
            & view:nth-child(2){
              display: flex;
              font-size: 20rpx;
              align-items: center;
              image{
                width: 32rpx;
                height: 20rpx;
                margin-right: 10rpx;
              }
            }
           
          }
          .text{
            font-size: 50rpx;
            color: #c7c7c7;
          }
        }
        
      }
    
    }

  }
</style>
